import styled from 'styled-components'

export const TopBanerWrapper = styled.div `
  height: 270px;
  background: url(${props=>props.bgImg}) center center;
  background-size: 6000px;


  .banner{
    position: relative;
    display: flex;
    height: 100%;

    .left{
      width: 730px;


      .item{
        width: 100%;
        overflow: hidden;
        img{
          width: 100%;
        }
      }
    }
    .right{
      flex: 1;
      background: url(${require("@/assets/img/download.png").default});
    }

    .control{
      
      .btn {
        width: 37px;
        height: 63px;     
        background-image: url(${require("@/assets/img/banner_sprite.png").default});
        background-color: transparent;
        cursor: pointer;
      }
      .btn-right{
       position: absolute;
       top: 50%;
       right: -57px;
       transform: translateY(-50%);
       background-position: 0 -508px;
      }
      .btn-left{
       position: absolute;
       top: 50%;
       left: -57px;
        transform: translateY(-50%);
        background-position: 0 -360px;
      }

      .btn:hover{
        background-color: #8c9192;
      }
    }
  }


`